<template>
    <div style="margin-bottom: 20px">
        <el-card shadow="hover"  style="height: 260px" v-loading="loading">
            <div class="approve_style">
                <ve-pie :data="pieChartData" :settings="pieSettings" :extend="pieExtend" style="width:50%;"></ve-pie>
                <div id="approve" ref="approve" style="width:50%; height: 300px;"></div>
            </div>
        </el-card>
    </div>
</template>

<script>

    import ECharts from 'echarts/lib/echarts'

    export default {
        name: 'ApproveOverview',
        props: {
            approve: {
                type: Object,
                required: true
            },
            loading: {
                type: Boolean,
                required: true
            }
        },
        watch: {
            approve: {
                handler: function (newVal) {
                    const approvePass = [
                        newVal.approvePassRate,
                        newVal.oldApprovePassRate,
                        newVal.newApprovePassRate
                    ]
                    const myChart = ECharts.init(this.$refs.approve)
                    myChart.setOption({
                        color: '#61A0A8',
                        tooltip: {
                            // 设置百分号
                            formatter: '{b0}:{c0}%',
                            trigger: 'axis'
                        },
                        grid: {
                            left: 200,
                            top: 20,
                            bottom: 115
                        },
                        yAxis: {
                            data: [this.$t('TODAY_APPROVE_PASS_RATE'), this.$t('OLD'), this.$t('NEW')]
                        },
                        xAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        },
                        series: [{
                            type: 'bar',
                            data: approvePass,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'right',
                                        // 给顶部数值添加百分比，为0时不显示
                                        formatter: (val) => {
                                            if (val.value !== 0) {
                                                return val.value + '%'
                                            } else {
                                                return ''
                                            }
                                        }
                                    }
                                }
                            }
                        }]
                    })
                },
                deep: true
            }
        },
        computed: {
            pieChartData () {
                return {
                    columns: ['label', 'value'],
                    rows: [
                        { label: this.$i18n.t('WAIT_APPROVE_TOTAL'), value: this.approve.waitApprove },
                        { label: this.$i18n.t('APPROVED_TOTAL'), value: this.approve.approveComplete },
                        { label: this.$i18n.t('APPROVE_TOTAL'), value: this.approve.total },
                        { label: this.$i18n.t('APPROVE_REJECT'), value: this.approve.approveReject },
                        { label: this.$i18n.t('APPROVE_CANCEL'), value: this.approve.approveCancel }
                    ]
                }
            }
        },
        data () {
            return {
                // 今日审核总览(饼状)
                pieSettings: {
                    level: [
                        [this.$i18n.t('WAIT_APPROVE_TOTAL'), this.$i18n.t('APPROVED_TOTAL')],
                        [this.$i18n.t('APPROVE_TOTAL'), this.$i18n.t('APPROVE_REJECT'), this.$i18n.t('APPROVE_CANCEL')]
                    ],
                    radius: 90,
                    offsetY: 112
                },
                pieExtend: {
                    color: ['#FF6600', '#91C7AE', '#61A0A8', '#D48265', '#BABABA'],
                    colo2r: ['#ff0000'],
                    series: {
                        type: 'pie',
                        label: {
                            show: true,
                            formatter: function (val) {
                                return val.name + ':' + val.value
                            }
                        }
                    },
                    // 设置图例的属性
                    legend: {
                        orient: 'vertical',
                        left: 0
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .approve_style{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
</style>
